<template>
	<!-- 第一部分 -->
	<view class="fiex">
		<view class="box1">
			<text class="feng">{{name}}</text> 
			<text class="ren">本人</text>
			<view class="num">{{number}}</view>
		</view>	
		<view class="box2" @click="toggle('bottom')">	
			<image src="../../../../static/images/切换.png"></image>
			<view class="title">
				切换就诊人
			</view>	
		</view>		
	</view>
	<!-- 第一部分的弹框 -->
	<uni-popup ref="popup" background-color="#fff" @change="change" >
		<view class="tankuang">
			<text>选择就诊人</text>
			<uni-icons type="closeempty" size="20" ></uni-icons>
		</view>
		<uni-list class="shang">
			<uni-list-item   :show-badge="true" showArrow >
				<template v-slot:header>
						<text class="newfeng">{{name}}</text>
						<text class="newren">本人</text>
						<view class="newnum">{{number}}</view>
				</template>
		</uni-list-item>
			<uni-list-item  showArrow>
				<template v-slot:header>
				<text class="newfeng">{{name}}</text>
				<text class="newren">本人</text>
				<view class="newnum">{{number}}</view>
				</template>
			</uni-list-item>
		</uni-list>
	</uni-popup>
	<!-- 第二部分 -->
		<view class="two">
			<view class="nian">近一年</view>
			<view @click="showPicker" class="pickerStyle">{{chooseDate}}</view>
			<rangeDatePick 
				:show="isShow"
				@showchange="showchange"
				:start="start"
				:end="end"
				:value="value"
				@change="bindChange"
				@cancel="bindCancel"
				themeColor="#4C83D6"
				fields="day"
			></rangeDatePick>
		</view>

    <!--第三部分  -->
	<view class="three">
		<view class="jiuzhen">
			<text class="du">特需病院区</text> <text class="yu">已出院</text>
		</view>
		<view class="jiuzhen">
			<text class="keshi">住院人</text> <text class="ke">蒋峰</text> <text class="qian">￥60.00</text>
		</view>
		<view class="jiuzhen">
			<text class="keshi">入院时间</text> <text class="ke">2020年10月5日 10:50</text>
		</view>
		<view class="jiuzhen">
			<text class="keshi">出院时间</text> <text class="ke">2020年10月5日 10:50</text>
		</view>	
	</view>

<view class="three">
		<view class="jiuzhen">
			<text class="du">特需病院区</text> <text class="yu">已出院</text>
		</view>
		<view class="jiuzhen">
			<text class="keshi">住院人</text> <text class="ke">蒋峰</text> <text class="qian">￥60.00</text>
		</view>
		<view class="jiuzhen">
			<text class="keshi">入院时间</text> <text class="ke">2020年10月5日 10:50</text>
		</view>
		<view class="jiuzhen">
			<text class="keshi">出院时间</text> <text class="ke">2020年10月5日 10:50</text>
		</view>	
	</view>
	<view class="three">
		<view class="jiuzhen">
			<text class="du">特需病院区</text> <text class="yu">已出院</text>
		</view>
		<view class="jiuzhen">
			<text class="keshi">住院人</text> <text class="ke">蒋峰</text> <text class="qian">￥60.00</text>
		</view>
		<view class="jiuzhen">
			<text class="keshi">入院时间</text> <text class="ke">2020年10月5日 10:50</text>
		</view>
		<view class="jiuzhen">
			<text class="keshi">出院时间</text> <text class="ke">2020年10月5日 10:50</text>
		</view>	
	</view>
</template>


<script>
	import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
	export default {
		components: {
			 rangeDatePick
			 },
		data() {
			 const currentDate = this.getDate({format: true})
			return {
				name: "蒋峰",
				number: '622*********0909',
				nowDate:currentDate,//获取当前时间
				isShow:false,
				value:[],
				chooseDate:"选择时间 >",
				start:"1900-01-01",
				end:"2200-12-01",
				type: "default",
				inverted: false,
			}
		},
		methods: {
			showPicker(e){
				this.isShow=true;
			},
			showchange(){
				this.isShow=!this.isShow;
			},
			bindChange(data){
				console.log(data)
				this.chooseDate=data[0]+"至"+data[1]
			},
			bindCancel(e){
				console.log(e)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			setType() {
				let types = ["default", "primary", "success", "warning", "error"];
				let index = types.indexOf(this.type);
				types.splice(index, 1);
				let randomIndex = Math.floor(Math.random() * 4);
				this.type = types[randomIndex];
				},
			setInverted() {
				this.inverted = !this.inverted;
				},
		toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			}
		},
		onLoad() {
			//模拟修改start和end
			setTimeout(()=>{
				this.start = "2000-01-01";
				this.end = "2022-01-01"
			},4000)
		}
	}
</script>

<style lang="scss">

.fiex {
	display: flex;
	justify-content: space-between;
	width: 700rpx;
	height: 200rpx;
	background-color: #f5f9ff;
	margin: 50rpx 26rpx ;
	text-align: center;
}
.box1 {
		margin: 40rpx 20rpx;
	}
	
	.feng {
		margin-right: 48rpx;
	}
	
	.ren {
		display: inline-block;
		font-size: 30rpx;
		width: 100rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 30rpx;
		color: #4169E1;
		background-color: #ADD8E6;
	}
	
	.box2 {
		margin: 40rpx 20rpx;
	}
image{
	width: 40rpx;
	height: 40rpx;
}
	.title {
		color: #C0C0C0;
		font-size: 30rpx;
		padding: 10rpx 14rpx;
	}

.num {
	padding: 20rpx 0;
	font-size: 30rpx;
	color: #C0C0C0;
}

	
.pickerStyle {
	width: 240rpx;
	height: 60rpx;
	background-color: #ADD8E6;
	font-size: 30rpx;
	text-align: center;
	line-height: 60rpx;
	border-radius: 30rpx;
	display: inline-block;
	margin-left: 50rpx;
}

.nian {
	display: inline-block;
	margin-left: 26rpx;
	width: 150rpx;
	height: 60rpx;
	background-color: #4169E1;
	font-size: 30rpx;
	text-align: center;
	line-height: 60rpx;
	border-radius: 30rpx;
}

.three {
	width: 700rpx;
	height: 400rpx;
	border: 1px solid #A9A9A9;
	border-radius: 20rpx;
	box-shadow: 10px 10px 5px -4px rgba(169, 169, 169, 0.8);
	margin: 40rpx 26rpx;
}

.gong {
	height: 80rpx;
	border-bottom: 1px solid #A9A9A9;
	text-align: center;
	line-height: 80rpx;
}

.du {
	font-size: 35rpx;
	padding: 0 2rpx;
}

.yu {
	font-size: 30rpx;
	color: #4169E1;
	margin-left: 360rpx;

}
.qian{
	font-size: 36rpx;
	color: red;
	margin-left: 340rpx;
}
.jiuzhen {
	padding: 15rpx 20rpx;
	font-size: 35rpx;
}

.keshi {
	font-size: 30rpx;
	color: #A9A9A9;
}

.ke {
	margin-left: 25rpx;
	font-size: 30rpx;
}

.xian {
	width: 632rpx;
	border: 1px solid #A9A9A9;
	margin: auto 22rpx;
}

.xianren {
		width: 632rpx;
		border: 1px solid #A9A9A9;
		margin: 30rpx 2rpx;
}

.anniu {
	display: flex;
	justify-content:  flex-end;
	margin-top: -11rpx;
	margin-right: 37rpx;
}

.tankuang {
	height: 250rpx;
	display: flex;
	 justify-content: center;
	 text-align: center;
}

.tankuang :nth-child(1) {
	padding-top: 10rpx;
	flex: 9;
}

.tankuang :nth-child(2) {
	padding-top: 10rpx;
	flex: 1;
}

.newren {
	font-size: 30rpx;
	width: 100rpx;
	height: 50rpx;
	line-height: 50rpx;
	border-radius: 30rpx;
	color: #4169E1;
	background-color: #ADD8E6;
}

.newfeng {
	margin-right: 48rpx;
}

.newnum {
	font-size: 30rpx;
	color: #C0C0C0;
	
}

</style>
